<template>
  <view class="cate-four row">
    <view class="aside">
      <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true">
        <block v-for="(item, index) in cateList" :key="index">
          <view :class="'one-item sm ' + (index == selectIndex ? 'active' : '')" @click="changeActive(index)">
            <text class="name">{{ item.name }}</text>
            <view v-if="index == selectIndex" class="active-line bg-primary"></view>
          </view>
        </block>
      </scroll-view>
    </view>
    <view class="main bg-body">
      <scroll-view style="height: 100%" scroll-y="true" scroll-with-animation="true" @scrolltolower="getGoodsSearchFun">
        <view class="main-wrap">
          <view style="border-radius: 10rpx;">
            <swipers :pid="4" height="200rpx" previous-margin="0" padding="20rpx 0 0" radius="10rpx">
            </swipers>
          </view>
          <view class="cate-two mt20" v-if="currentType">
            <view v-for="(sitem, sindex) in cateTwoList" :key="sindex" class="two-item bg-white mb20">
              <navigator class="title row-between" v-if="sitem.type == 1" hover-class="none"
                         :url="`/pages/goods_search/goods_search?id=${sitem.id}&name=${sitem.name}&type=${sitem.type}`">
                <text class="name bold sm">{{ sitem.name }}</text>
                <u-icon name="arrow-right"></u-icon>
              </navigator>
              <view class="title row-between" v-else>
                <text class="name bold sm">{{ sitem.name }}</text>
              </view>
              <view class="three-list row wrap">
                <navigator v-for="(titem, tindex) in sitem.sons" :key="tindex"
                           class="three-item column-center mb20" hover-class="none"
                           :url="`/pages/goods_search/goods_search?id=${titem.id}&name=${titem.name}&type=${titem.type}`">
                  <u-image mode="aspectFit" width="150rpx" height="150rpx" :src="titem.image">
                  </u-image>
                  <view class="text mt20 xs">{{ titem.name }}</view>
                </navigator>
              </view>
            </view>
          </view>
          <view class="goods" v-else>
            <view class="row condition bg-white mt20">
              <!--							<view :class="'tag row-center ' + (comprehensive ? 'primary' : '')" @tap="onNormal">综合</view>-->
              <!--							<view class="tag row-center" data-type="priceSort" @tap="onPriceSort">-->
              <!--								<text :class="priceSort ? 'primary' : ''">价格</text>-->
              <!--								<view>-->
              <!--									<trigonometry direction="up" size="small" :color="priceSort == 'desc' ? '#FF5058' : '#333'">-->
              <!--									</trigonometry>-->
              <!--									<trigonometry size="small" :color="priceSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>-->
              <!--								</view>-->
              <!--							</view>-->
              <!--							<view class="tag row-center" data-type="saleSort" @tap="onSaleSort">-->
              <!--								<text :class="saleSort ? 'primary' : ''">销量</text>-->
              <!--								<view>-->
              <!--									<trigonometry direction="up" size="small" :color="saleSort == 'desc' ? '#FF5058' : '#333'">-->
              <!--									</trigonometry>-->
              <!--									<trigonometry size="small" :color="saleSort == 'asc' ? '#FF5058' : '#333'"></trigonometry>-->
              <!--								</view>-->
              <!--							</view>-->
            </view>
            <view class="goods-list">
              <navigator hover-class="none" class="row item bg-white mt20" v-for="(item, index) in goodsList"
                         :key="index" :url="`/pages/goods_details/goods_details?id=${item.id}`">
                <u-image width="200rpx" height="200rpx" border-radius="14rpx" :src="item.image"></u-image>
                <view class="flex1 ml20 mr10">
                  <view class="goods-name">{{ item.name }}</view>
                  <view class="goods-desc">{{ item.remark }}</view>
                  <view class="muted">
                    <text class="xxs">已售:{{ item.sales_sum }}</text>
                  </view>
                  <view class="primary mt10 row-between">
                    <price-format :price="item.price" :subscriptSize="22" :weight="700" color="#fa4000" :firstSize="34"
                                  :secondSize="22"></price-format>
                    <u-image class="goods-icon-xs ml10" width="48rpx" height="48rpx" src="/static/images/add.png">
                    </u-image>
                  </view>
                </view>
              </navigator>
            </view>
            <loading-footer :status="status" :slot-empty="true">
              <view slot="empty" class="column-center" style="padding: 200rpx 0 0">
                <image class="img-null" src="/static/images/goods_null.png"></image>
                <text class="lighter sm">暂无商品</text>
              </view>
            </loading-footer>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  arraySlice,
  trottle,
  loadingFun
} from '@/utils/tools'
import {
  getGoodsSearch,
} from '@/api/store';
import {
  loadingType
} from '@/utils/type';

export default {
  name: "cate-four",
  props: {
    list: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      page: 1,
      status: loadingType.LOADING,
      selectIndex: 0,
      cateList: [],
      cateTwoList: [],
      goodsList: [],
      priceSort: '',
      saleSort: '',
    };
  },
  created() {
    this.onNormal = trottle(this.onNormal, 500, this);
    this.onPriceSort = trottle(this.onPriceSort, 500, this);
    this.onSaleSort = trottle(this.onSaleSort, 500, this);
  },
  methods: {
    changeActive(index) {
      const {
        cateList
      } = this
      this.selectIndex = index
      this.cateTwoList = cateList[this.selectIndex].sons || []
      this.onRefresh()
    },
    onRefresh() {
      this.page = 1
      this.goodsList = []
      this.status = loadingType.LOADING
      this.$nextTick(() => {
        this.getGoodsSearchFun();
      });
    },
    onNormal() {
      this.priceSort = ''
      this.saleSort = ''
      this.onRefresh();
    },

    onPriceSort() {
      let {
        priceSort
      } = this;
      this.saleSort = ''
      this.priceSort = priceSort == 'asc' ? 'desc' : 'asc'
      this.onRefresh();
    },

    onSaleSort() {
      let {
        saleSort
      } = this;
      this.priceSort = ''
      this.saleSort = saleSort == 'desc' ? 'asc' : 'desc'
      this.onRefresh();
    },
    async getGoodsSearchFun() {
      let {
        page,
        goodsList,
        priceSort,
        saleSort,
        status,
        cateList,
        selectIndex
      } = this;
      const item = cateList[selectIndex]
      if (item.type == 0) return
      if (status == loadingType.FINISHED) return;
      const params = {
        category_id: item.id,
        page_no: page,
        price: priceSort,
        sales_sum: saleSort
      }
      const data = await loadingFun(getGoodsSearch, page, goodsList, status, params)
      if (!data) return
      this.page = data.page
      this.goodsList = data.dataList
      this.status = data.status
    },
  },
  watch: {
    list: {
      handler(val) {
        if (!val.length) return
        let index = val.findIndex((item) => item.type == 1)

        this.selectIndex = index == -1 ? 0 : index
        this.cateList = val
        this.cateTwoList = val[this.selectIndex] ? val[this.selectIndex].sons : []
        this.getGoodsSearchFun()

      }
    }
  },
  computed: {
    comprehensive() {
      const {
        priceSort,
        saleSort
      } = this
      if (priceSort == '' && saleSort == '') {
        return true;
      }

      return false;
    },
    currentType() {
      const {
        cateList,
        selectIndex
      } = this
      return cateList[selectIndex] ? cateList[selectIndex].type == 0 : true
    }
  },
}
</script>

<style lang="scss">
$header-height: 94rpx;
.cate-four {
  height: calc(100vh - #{$header-height} - var(--window-top) - var(--window-bottom));
  background-color: #fff;

  .aside {
    width: 180rpx;
    flex: none;
    height: 100%;
    background-color: #f7f7f7;
    border-top-right-radius: 16rpx;


    .one-item {
      position: relative;
      text-align: center;
      margin: 20rpx 15rpx 0 30rpx;
      padding: 10rpx 0;

      &.active {
        color: #ffffff;
        font-size: 24rpx;
        font-weight: bold;
        background-color: #0066ff;
        border-radius: 24rpx;
      }

    }
  }

  .main {
    height: 100%;
    flex: 1;

    .main-wrap {
      position: relative;
      padding: 0 20rpx;

      .goods {
        .item {
          border-radius: 14rpx;
          overflow: hidden;

          .add {
            width: 46rpx;
            height: 46rpx;
            line-height: 46rpx;
            text-align: center;
          }
        }
      }

      .two-item {
        border-radius: 10rpx;

        .title {
          height: 90rpx;
          padding: 0 20rpx;

          .line {
            width: 40rpx;
            height: 1px;
            background-color: #BBBBBB;
          }
        }

        .three-list {
          align-items: flex-start;
          padding: 0 10rpx;

          .three-item {
            width: 33%;

            .text {
              text-align: center;
            }
          }
        }

      }
    }
  }

  .condition {
    //height: 80rpx;
    border-radius: 10rpx;

    .tag {
      flex: 1;
    }
  }
}

.goods-name {
  font-size: 32rpx;
  color: #222222;
  font-weight: bold;
  margin-bottom: 5rpx;
}

.goods-desc {
  color: #9d9d9d;
  font-size: 24rpx;
  max-height: 65rpx;
  overflow: hidden;
  margin-bottom: 5rpx;
}

.muted {
  color: #56555d;
}
</style>
